<template>
  <base-modal
    :show="dialogVisible"
    :title="$t('setting.enterprise.accountLoginSettingsText12')"
    width="600px"
    @cancel="closeDialog"
  >
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
    >
      <el-form-item
        label="App ID"
        prop="appId"
      >
        <el-input v-model="ruleForm.appId"></el-input>
      </el-form-item>

      <el-form-item
        label="App Secret"
        prop="appSecret"
      >
        <el-input v-model="ruleForm.appSecret"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button @click="closeDialog">{{$t('common.base.cancel')}}</el-button>
      <el-button
        type="primary"
        :loading="loading"
        @click="onSubmit"
      >
        {{$t('common.base.confirm')}}
      </el-button>
    </div>
  </base-modal>
</template>
<script>
import { defineComponent, ref, reactive, toRefs } from 'vue';

import i18n from '@src/locales'

export default defineComponent({
  name: 'FeishuSelfBuiltDialog',
  setup(props, { emit }) {
    const ruleFormRef = ref();
    const dialogVisible = ref(false);
    const loading = ref(false);

    const state = reactive({
      ruleForm: {
        appId: '',
        appSecret: '',
      },
      rules: {
        appId: [{ required: true, message: i18n.t('setting.enterprise.accountLoginSettingsVal12'), trigger: 'blur' }],
        appSecret: [{ required: true, message: i18n.t('setting.enterprise.accountLoginSettingsVal13'), trigger: 'blur' }],
      },
    });

    const openDialog = row => {
      dialogVisible.value = true;
      state.ruleForm = { ...row };
    };

    const closeDialog = () => {
      dialogVisible.value = false;
      loading.value = false;
      ruleFormRef.value.resetFields();
    };

    const onSubmit = () => {
      ruleFormRef.value.validate(valid => {
        if (valid) {
          loading.value = true;
          emit('submitLoginInfo', {
            params: state.ruleForm,
            type: 'feiShu',
            callBack: () => {
              closeDialog();
            },
          });
        }
      });
    };

    return {
      ruleFormRef,
      dialogVisible,
      loading,
      ...toRefs(state),
      openDialog,
      closeDialog,
      onSubmit,
    };
  },
});
</script>